<template>
  <div>
    <el-card class="box-card">
      <!-- 面包屑导航 -->
        <div slot="header" v-if="$route.query.id && $route.query.subjectName" >
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{$route.query.subjectName}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 筛选 -->
      <el-row>
        <el-col :span="18">
          <el-form label-width="80px" size="small" :inline="true">
            <el-form-item label="标签名称">
              <el-input v-model="requestParams.tagName" style="width: 200px">
              </el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="requestParams.state">
                <el-option :value="1" label="启用"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="searchForm">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button type="text"  v-if="$route.query.id && $route.query.subjectName" @click="$router.back()" color="blue" icon="el-icon-back"
            >返回学科</el-button
          >
          <el-button icon="el-icon-edit" type="success" @click="openDialogone"
            >新增标签</el-button
          >
        </el-col>
      </el-row>
      <!-- 数据记录 -->
      <el-alert
        :closable="false"
        :title="`数据一共${total}条`"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="questions" style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column label="标签名称" prop="tagName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button type="text" @click="toggleState(scope.row)">{{
              scope.row.state === 1 ? '禁用' : '启用'
            }}</el-button>
            <el-button
              @click="openDialog(scope.row)"
              type="text"
              :disabled="scope.row.state === 1 ? true : false"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1 ? true : false"
              @click="clickRemove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <openDialog ref="openDialog" @updateList="updateList" />
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags.js'
import openDialog from '@/module-hmmm/components/tags-add.vue'
export default {
  data () {
    return {
      requestParams: {
        page: 1,
        pagesize: 20,
        tagName: '',
        state: null
      },
      questions: [],
      total: 0,
    }
  },
  components: {
    openDialog
  },
  created () {
    this.getList()
  },
  // 数据发生改变的的时候
  watch: {
    '$route.query': function () {
      this.getList()
    }
  },
  methods: {
    updateList () {
      this.getList()
    },
    // 获取数据
    async getList () {
      this.requestParams.subjectID = this.$route.query.id || null
      console.log(this.requestParams)
      const { data: res } = await list(this.requestParams)
      this.questions = res.items
      this.total = res.counts
      console.log(res)
    },
    // 点击了清除按钮
    clear () {
      this.requestParams = {
        tagsName: null,
        state: null,
        page: 1,
        pagesize: 10
      }
      this.getList()
    },
    // 点击了搜索按钮
    searchForm () {
      this.requestParams.page = 1
      this.getList()
    },
    // 切换状态
    async toggleState (row) {
      console.log(row)
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      row.state = row.state === 1 ? 0 : 1
    },
    // 点击了修改按钮
    openDialog (row = {}) {
      this.$nextTick(() => {
        this.$refs.openDialog.open(row)
      })
       
    },
    openDialogone() {
        this.$nextTick(() => {
      this.$refs.openDialog.openNew(this.$route.query)
    })
    },
    // 删除
   clickRemove (row) {
     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then( async ()=> {
      const res = await remove(row)
      this.$message.success('删除成功!')
      this.getList()
      console.log(res)
    }).catch(() => {
      this.$message.info('已取消删除')
    })
  } 
}}
</script>

<style scoped lang='less'>
.el-alert {
  margin: 15px 0;
}
</style>
